<!--
 * @Author: 胡俊/treence
 * @Date: 2022-05-24 09:45:03
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-14 16:35:00
 * @Description: 
 * @Email: treence@gmail.com
 * @Company: 3xData
 * @youWant: 我的=》从业人员信息
-->

<template>
  <view class="container_page">

    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />
    <view class="main">
      <view class="card">
        <view class="title">从业人员统计</view>

        <view class="formItem">
          <view class="label">注册消防工程师</view>
          <input class="content"
                 v-model="form.registeredFireEngineerCount"
                 disabled />
        </view>

        <view class="formItem">
          <view class="label">消防设施操作人员</view>
          <input class="content"
                 v-model="form.countryCertificateCount"
                 disabled />
        </view>

      </view>

      <!-- 下方的人员信息 -->
      <view class="card">
        <view class="title">从业人员明细</view>

        <scroll-view-y>
          <view slot="scrollView_content">
            <view class="peopleBar"
                  v-for="(item, index) in form.dstaffInfoList"
                  :key="index">
              <view class="peopleInfo"
                    @click="toPage(item.staffId)">
                <view class="peopleName">{{ item.name }}</view>
                <view class="job">{{ item.registeredFireEngineer || item.facilityOperators }}</view>
              </view>
              <view class="cuIcon-right" />
            </view>
          </view>
        </scroll-view-y>
      </view>

    </view>

  </view>
</template>
<script>
import ScrollViewY from "@/components/scrollViewY/index.vue";
export default {
  components: { ScrollViewY },
  //! 提供给组件 下拉刷新上拉加载的 数据获取的方法
  provide () {
    return {
      getData: null,
      loading: false,
    };
  },
  data () {
    return {
      navOptions: {
        // 导航栏配置参数
        statusBar: "dark",
        left: {
          icon: "back",
        },
        center: {
          title: "从业人员信息",
        },
      },
      form: {}
    };
  },
  created () {
    this.getForm()

  },
  methods: {
    // 获取表单信息
    getForm () {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });
      this.$store.dispatch('organizeInfo_form', '')
        .then(res => {
          if (res && res.code === 200) {
            // 处理数据
            this.form = res.data
          }
        })
        .finally(() => {
          let timer = setTimeout(() => {
            this.loading = false
            uni.hideLoading();
            clearTimeout(timer)
          }, 3000);
        })
    },
    // 跳转至人员页面
    toPage (id) {
      uni.navigateTo({
        url: "../../pages_workTableChild/peopleManage/form?id=" + id,
      });
    }
  }
};
</script>
<style lang="less">
.container_page {
  background: #f4f5f5;
  height: 100vh;
  font-size: 28rpx;
}
.main {
  height: 100vh;
  overflow: auto;
  padding-bottom: 300rpx;
  .card {
    background: white;
    margin-bottom: 16rpx;
    padding: 40rpx 24rpx;
    border-radius: 20rpx;

    & > view:not(:last-child) {
      margin-bottom: 20rpx;
    }
  }
}
.title {
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 36rpx;
  .titleTip {
    display: inline;
    font-weight: 300;
    font-size: 20rpx;
    color: red;
  }
}
.formItem {
  display: flex;
  align-items: center;

  .label {
    color: #333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 36rpx;
    width: 35%;
  }

  .content {
    flex: 1;
    text-align: right;
  }
}
.peopleBar {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 2rpx solid #ddd;
  &:active {
    background-color: white;
  }

  .peopleInfo {
    flex: 1;
    view:first-child {
      font-size: 30rpx;
      font-weight: bold;
    }
    view:last-child {
      font-size: 24rpx;
      color: #999;
    }
  }
  view[class*="cuIcon-"] {
    width: inherit;
  }
}
</style>
